<template>
  <div>
    <div class="match-performance-items">
      <div
        @click="clickPerformance(item)"
        v-for="(item, index) in performance"
        :key="index"
        class="performanceClass"
        :class="{ active: activePerformance === item }"
      >
        {{ item }}
      </div>
    </div>

    <dataComparison
      :battleTeam="battleTeam"
      :comparisonData="comparisonData"
      v-if="activePerformance === '数据对比'"
    />
    <PlayerRating
      :playersRating="playersRating"
      v-show="activePerformance === '球员得分'"
    />
  </div>
</template>

<script>
import DataComparison from "./DataComparison";
import PlayerRating from "./playerRating/PlayerRating";
import axios from "axios";
export default {
  name: "PerformanceBattle",
  props: {
    matchId: {
      type: Number,
    },
    battleTeam: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    DataComparison,
    PlayerRating,
  },
  data() {
    return {
      activePerformance: "球员得分",
      performance: ["数据对比", "球员得分"],
      comparisonData: [],
      playersRating: [],
    };
  },
  methods: {
    clickPerformance(item) {
      this.activePerformance = item;
    },
    async getButterFlyData(matchId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/matches/matchIndicator/${matchId}`
      );
      console.log("getButterFlyData方法被调用");
      this.comparisonData = data;
    },
    async getRatingData(matchId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/matches/matchPerformance/${matchId}`
      );
      console.log("getRatingData方法被调用");
      this.playersRating = data;
    },
  },
  created() {
    console.log("performance_created");
    console.log("performance比赛id:", this.$route.params.matchId);
    // const matchId = this.$route.params.matchId;
    // this.getButterFlyData(matchId);
    // this.getRatingData(matchId);
  },
  beforeRouteEnter(to, from, next) {
    console.log("from:", from);
    console.log("to:", to);
    const { matchId } = to.params;
    console.log("PerformanceBattle_beforeRouteEnter:", matchId);
    next((vm) => {
      vm.getButterFlyData(matchId);
      vm.getRatingData(matchId);
    });
  },
  // beforeRouteUpdate(to, from, next){
  //   const {matchId} = to.params;
  //   console.log('performance_beforeRouteUpdate:',matchId);
  //   this.getButterFlyData(matchId);
  //   this.getRatingData(matchId);
  //   next()
  // }
};
</script>

<style scoped lang="scss">
.match-performance-items {
  display: flex;
  justify-content: flex-start;
  width: 1440px;
  height: 56px;
  margin: 40px auto 0;
  /*background-color: red;*/
}
.performanceClass {
  color: #16c79a;
  line-height: 56px;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 5px;
  text-align: center;
  width: 152px;
  height: 100%;
  background-color: #194568;
  border-radius: 10px 10px 0 0;
  margin-right: 3px;
}
.box-card {
  margin: auto;
  width: 1440px;
  height: 553px;
}
.pass-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #194568;
  padding: 0;
  div {
    margin-right: 10px;
  }
}
.pass-main {
  display: flex;
  height: 830px;
  padding: 0;
  background-color: #f1f6f9;
}
.performanceClass {
  color: white;
  line-height: 56px;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 5px;
  text-align: center;
  width: 152px;
  height: 100%;
  background-color: #9e9e9e;
  border-radius: 10px 10px 0 0;
  margin-right: 3px;
}
.performanceClass:hover {
  color: #16c79a;
  background-color: #194568;
  cursor: pointer;
}
.active {
  color: #16c79a;
  background-color: #194568;
}
</style>
